<template>
  <div class="app h100">
    <div class="ding">顶部</div>
    <div class="zhong" v-for="i in 100">
      <ul>
        <li>
          我是第{{ i }}条数据  
        </li>
      </ul>
    </div>
    <div class="di">底部</div>
  </div>
</template>

<script setup>

</script>

<style lang="scss" scoped>
.app{
  display: flex;
  flex-direction: column;
  .ding{
    text-align: center;
    height: 45px;
    line-height: 45px;
  }
  .zhong{
    flex: 1;
  }
  .di{
    text-align: center;
    height: 45px;
    line-height: 45px;
  }
}
</style>